<template>
	<div>
		<div class="class_yy_top">
			<list :list="[0]"></list>
		</div>
		<div class="class_yy_sk">
			<div class="class_yy_sk_items">
				<span>上课人数</span>1人
			</div>
			<div class="class_yy_sk_items">
				<span>上课时间</span>10:40-11:40
			</div>
		</div>

		<!-- title -->
		<div class="bmBox">
			<div class="class_title">
				<div class="class_title_left">

				</div>
				<div class="class_title_right">
					已报名(5/10)
				</div>
			</div>

			<div class="class_more">
				<div class="class_more_item" v-for="(ite,idx) in [0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0]">
					<image src="https://wx.sjcmhz.com/static/logo.png" mode=""></image>
				</div>
				<div class="class_more_img">
					<image src="https://wx.sjcmhz.com/static/image/classMore.png" mode=""></image>
				</div>
			</div>
		</div>



		<!-- bottom -->
		<div class="class_bottom">
			<div class="class_bottom_left">
				<div class="class_bottom_items">
					<div class="class_bottom_items_top">
						<image src="https://wx.sjcmhz.com/static/logo.png" mode=""></image>
					</div>
					<div class="class_bottom_items_bottom">
						分享
					</div>
				</div>
				<div class="class_bottom_items">
					<div class="class_bottom_items_top">
						<image src="https://wx.sjcmhz.com/static/logo.png" mode=""></image>
					</div>
					<div class="class_bottom_items_bottom">
						联系我
					</div>
				</div>
			</div>
			<div class="class_bottom_right">
				立即预约
			</div>

		</div>
	</div>
</template>

<script>
	import list from './components/list.vue'
	export default {
		components: {
			list
		},
		data() {
			return {

			}
		}
	}
</script>

<style lang="scss">
	.class_yy_top {
		width: 750rpx;
		height: 228rpx;
		background: #FFFFFF;
		margin-top: 24rpx;
	}
	.class_yy_sk{
		width: 100%;
		height: 200rpx;
		background: #FFFFFF;
		margin-top: 24rpx;
		.class_yy_sk_items{
			width: 100%;
			height: 100rpx;
			border-bottom: 1rpx solid #ddd;
			font-size: 30rpx;
			padding: 0 38rpx;
			box-sizing: border-box;
			line-height: 100rpx;
			span{
				margin-right: 40rpx;
			}
		}
		.class_yy_sk_items:last-child{
			border: none;
		}
	}

	.class_title {
		align-items: center;
		display: flex;
		height: 80rpx;
		position: relative;

		.class_more_btn {
			color: #999999;
			font-size: 26rpx;
			position: absolute;
			right: 0;
			top: 24rpx;
			display: flex;
		}

	}

	.class_title_left {
		width: 12rpx;
		height: 30rpx;
		background: #9013FE;

		margin-right: 10rpx;

	}

	.class_title_right {
		font-size: 28rpx;
		font-weight: bold;
	}

	.bmBox {
		width: 684rpx;
		min-height: 164rpx;
		background: #FFFFFF;
		border-radius: 16rpx;
		margin: 24rpx auto 0 auto;
		padding: 0 24rpx;
		box-sizing: border-box;
		padding-bottom: 22rpx;


		.class_more {
			align-items: center;
			display: flex;
			margin-top: 10rpx;
			flex-wrap: wrap;
			position: relative;

			.class_more_img {
				position: absolute;
				right: -6rpx;
				top: -6rpx;
				z-index: 1;
				width: 68rpx;
				height: 68rpx;
			}

			.class_more_item {
				width: 54rpx;
				height: 54rpx;
				border-radius: 50%;
				margin-right: 10rpx;
				background: #eee;
				margin-bottom: 10rpx;

				image {
					border-radius: 50%;
				}


			}
		}
	}

	.downBottom {
		margin-bottom: 250rpx;
	}

	.class_bottom {
		width: 100%;
		height: 104rpx;
		background: #FFFFFF;
		position: fixed;
		bottom: 0;
		left: 0;
		display: flex;
		align-items: center;
		justify-content: space-between;

		.class_bottom_left,
		.class_bottom_right {
			width: 50%;
			height: 100%;
			font-size: 20rpx;


		}

		.class_bottom_left {
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding: 0 75rpx;
			box-sizing: border-box;
		}

		.class_bottom_items {
			width: 60rpx;
			display: flex;
			flex-wrap: wrap;
			justify-content: center;

		}

		.class_bottom_items_top {
			width: 40rpx;
			height: 40rpx;
		}

		.class_bottom_items_bottom {
			font-size: 20rpx;
			text-align: center;
			margin-top: 10rpx;

		}

		.class_bottom_right {
			background: #9013FE;
			color: #fff;
			text-align: center;
			line-height: 104rpx;
			font-size: 32rpx;
		}
	}
</style>